<template>
  <a-card>
    <component :is="chartComponent" :chartData="data" :content="content" v-if="chartComponent" />
  </a-card>
</template>

<script>
import { analysis } from '@/api/analysis'
import PieChart from './charts/piechart'
import BarChart from './charts/barchart'
export default {
  components: { PieChart, BarChart },
  props: {},
  data() {
    return {
      chartComponents: {
        pie: PieChart,
        bar: BarChart
      },
      defaultChart: 'pie',
      chartComponent: undefined,
      data: {
        Datas: [],
        Conditions: []
      },
      content: null
    }
  },

  watch: {
    $route(to, from) {
      this.init()
    }
  },
  computed: {},
  methods: {
    init() {
      const param = this.$route.query
      if (param.chart) {
        const { chartComponents } = this
        this.chartComponent = chartComponents[param.chart]
        if (param.content) {
          this.content = String(param.content)
          analysis(String(param.content), null).then(res => {
            this.data = res.data
          })
        }
      } else {
      }
    }
  },
  activated() {
    this.init()
  },
  created() {
    this.init()
  },
  mounted() {}
}
</script>
<style lang="less" scoped></style>
